<template>
	<view>
	        <view class="uni-padding-wrap uni-common-mt">
	            <view class="uni-title uni-common-mt">
	            </view>
	            <view>
						<navigator :url="`/subpkg/blog-detail/blog-detail?id=${item.id}`" class="chat_data" v-for="(item,index) in blogData" :key="index">
	                      <view class="chat_view_pic">
	                            <image class="chat_header_pic" v-if="item.label1" :src="item.label1"></image>
	                            <image class="chat_header_pic" v-else src="../../static/pic.png"></image>
	                       </view>
	                     <view class="chat_info">
	                         <text class="chat_info_name">{{item.title}}</text>
	                         <text class="chat_info_msg ellipis_text">{{item.name}}</text>
	                     </view>
	                      <!-- <text class="chat_time">17:25</text> -->
	                    </navigator>
	            </view>
	             <view style="text-align: center;margin-top: 10rpx;" v-if="pageNum<=allPage&&allPage!=0">
					 <text>正在加载更多数据</text>
				 </view>
				 <view style="text-align: center;margin-top: 15rpx;" v-else>
				 	 <text class="noData">暂无更多数据</text>
				 </view>
	        </view>
	    </view>
</template>

<script>
	export default {
		onLoad(options){
			this.authorId=options.authorId;
			this.pull();
			// document.querySelector('.uni-page-head-hd').style.display = 'none';
			//uni.startPullDownRefresh();
			uni.startPullDownRefresh();
		},
		mounted() {
			
		},
		data() {
			return {
				        authorId:'',
				        pageNum:1,
						allPage:0,
				        blogData:[],
			            scrollTop: 0,
						pulling:true,
			            old: {
			                scrollTop: 0
			            }
			        }
		},
		
		onPullDownRefresh() {
			this.blogData = [];
			this.pageNum = 1;
			this.allPage = 0;
			this.pull();
		},
		onReachBottom() {
			console.log(123455);
			this.pull();
		},
		
		methods: {
			
			pull(){
				
				if(this.allPage == 0 || this.pageNum<=this.allPage){
					if(this.pulling){
						this.pulling = false;
						this.getBlogList();
					}
					uni.stopPullDownRefresh();
				}else{
					uni.stopPullDownRefresh();
				}
				
				
			},
			
			 async getBlogList() {
							
							const {data:res} =await uni.$http.post('/blog/page_my_collect_blog_vo?rows=10&page='+this.pageNum,{authorId:this.authorId});
						
							let length = res.data.records.length;
							for (var i = 0; i < length; i++) {
								this.blogData.push(res.data.records[i]);
							}
							
							
							this.pulling = true;
							this.pageNum=res.data.pageNum+1;
							this.allPage=res.data.pages;
							uni.stopPullDownRefresh();
			 			},
			upper: function(e) {
			            console.log(e)
			        },
			        lower: function(e) {
			            console.log(e)
			        },
			        scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
			        goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			            uni.showToast({
			                icon:"none",
			                title:"纵向滚动 scrollTop 值已被修改为 0"
			            })
			        }
		}
	}
</script>

<style>
.chat_data{
  border-radius: 5rpx;
  padding: 1%;
  margin-top: 2%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  justify-content: space-between;
}
.chat_header_pic{
  width: 120rpx;
  height: 120rpx;
}


.chat_view_pic{
  width: 20%;
}

.chat_info{
  float: left;
  width: 86%;
  flex-direction: column;
  display: flex;
}

.line{
  margin-top: 10rpx;
  height: 1rpx;
  width: 100%;
  background-color: #D8D8D8;
}

.navigator{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFE1FF;
  border-radius: 15rpx;
  color: #666;
}

.search_input{
  width: 90%;
  margin: 0 auto;
  height: 90rpx;
  padding: 10rpx;
 
}
.chat_time{
  width: 20%;
  margin-top: 5%;
  font-size: xx-small;
}


.chat_info_name{
  font-size: medium;
  font-weight: bold;
}
.chat_info_msg{
  font-size: x-small;
  color: darkkhaki;
}

.noData{
	color: #D8D8D8;
}

.ellipis_text {//这个是省略的关键css代码
    overflow: hidden;
	word-break: break-all;  /* break-all(允许在单词内换行。) */
	text-overflow: ellipsis;  /* 超出部分省略号 */
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
}

</style>
